<template>
    <!-- 新闻中的动画 -->
    <h1 class="h-24 w-full flex justify-center items-center relative">
         <p class="absolute h-5 w-full border-b-[2px] border-dotted" style="border-color: aqua;"></p>
         <span class="flex justify-between items-center px-2 bg-[#fff] h-6 w-[4rem] translate-y-[40%]">
             <span class="w-2 h-2 rounded-full bg-[#7fffd4] inline-block" ref="dot1"></span>
             <span class="w-2 h-2 rounded-full bg-[#ed643b] inline-block" ref="dot2"></span>
             <span class="w-2 h-2 rounded-full bg-[#7fffd4] inline-block" ref="dot3"></span>
         </span>
     </h1>
 </template>
 
 <script setup lang="ts">
    import { onMounted, ref } from 'vue'
    import {gsap} from 'gsap'
     let dot1 = ref()
     let dot2 = ref()
     let dot3 = ref()
     onMounted(() => {
         let timeline = gsap.timeline({
             repeat: -1,
             repeatDelay: .2
         })
         timeline.to(dot1.value, {
             duration: .3,
             scale: 0,
             opacity: 0,
             ease: 'power1.out'
         })
         .to(dot2.value,{
             duration: .3,
             scale: 0,
             opacity: 0,
             ease: 'power1.out'
         })
         .to(dot3.value,{
             duration: .3,
             scale: 0,
             opacity: 0,
             ease: 'power1.out'
         })
         .to(dot1.value,{
             duration: .3,
             scale: 1,
             opacity: 1,
             ease: 'power1.out'
         })
         .to(dot2.value,{
             duration: .3,
             scale: 1,
             opacity: 1,
             ease: 'power1.out'
         })
         .to(dot3.value,{
             duration: .3,
             scale: 1,
             opacity: 1,
             ease: 'power1.out'
         })
     })
 </script>

 <style lang="less" scoped>

 </style>